<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Slot Test</title>
</head>
<body>
  <div id ="app">
    <a href="https://cn.vuejs.org/v2/guide/components-slots.html">V2.x插槽官方文档</a>
    <br>
    <br>

    <h2>使用新的插槽语法 v-slot (v2.6.0++)</h2>

    <div>First component (含作用域插槽 v-slot:name={&quot;xxx&quot;},即可由子组件向父组件传数据) </div>
    <cpn ref="first">
      <template  v-slot:devlangs="langslot">
        <!-- <a v-for="item in langslot.data">{{item}}, </a> -->
        <a>{{langslot.langdata.join(', ')}}</a>
      </template>
      <p slot="simple">Just to replace the simple slot text</p>
    </cpn>
    <hr/>

    <div>Second component</div>
    <cpn ref="second">
      <div slot="simple">Change Simple lot to new</div>
    </cpn>
    <hr/>

    <div>Third component (作用域插槽使用了 ES2015 解构)</div>
    <cpn>
      <template  v-slot:devlangs="{langdata}">
        <select>
          <option v-for="item in langdata">{{item}}</option>
        </select>
      </template>
    </cpn>

    <br>
    <br>

    <h2>以下使用旧的语法 slot + slot-scope</h2>

    <div>First component (含作用域插槽 slot-scope,即可由子组件向父组件传数据) </div>
    <cpn ref="first">
      <template  slot="devlangs" slot-scope="langslot">
        <!-- <a v-for="item in langslot.data">{{item}}, </a> -->
        <a>{{langslot.langdata.join(', ')}}</a>
      </template>
      <p slot="simple">Just to replace the simple slot text</p>
    </cpn>
    <hr/>

    <div>Second component</div>
    <cpn ref="second">
      <div slot="simple">Change Simple lot to new</div>
    </cpn>
    <hr/>

    <div>Third component (作用域插槽使用了 ES2015 解构)</div>
    <cpn>
      <template  slot="devlangs" slot-scope="{langdata}">
        <select>
          <option v-for="item in langdata">{{item}}</option>
        </select>
      </template>
    </cpn>

  </div>

  <template id="cpn">
    <div>
      <h2>{{title}}</h2>
      <slot :langdata="langs" name="devlangs">
        <ul>
          <li v-for="item in langs">{{item}}</li>
        </ul>
      </slot>
      <slot name="simple"><a>Simple slot</a></slot>
    </div>
  </template>

  <script src="../_js/vue.min.js"></script>
  <script>

  var vm = new Vue({
    el: '#app',
    components: {
      cpn: {
        computed: {
          langtexts(){
            return this.langs.join(', ')
          }
        },
        data(){
          return{
            langs: ['C++', 'Delphi', 'Java', 'JS', 'Python'],
            title: 'child component',
          }
        },
        template: '#cpn',
      }
    },
    data: {
      message:"",
      title:"test"
    },
    methods: {}
  });

  console.log("first", vm.$refs.first)
  console.log("parent of first", vm.$refs.first.$parent)
  console.log("languages of second", vm.$refs.second.langs)

  </script>  
</body>
</html>